import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "../views/Home";
import List from "../views/List";
import About from "../views/About";
import Detail from "../views/Detail";
// import App2 from "../App2";

/*
    目标：
        实现多级路由

        1. 还是需要先搭建一个基本的 三层
            BrowserRouter > Routes > Route
        2. 直接在上级的Route里面写下级的Route
            <Route path="一级路由">
                <Route path="二级路由" />
            </Route>
        3. 在对应的上级路由的组件里面写 <Outlet> 组件，用来展示子路由对应的组件
*/
// const router = (
//   <BrowserRouter>
//     <Routes>
//       {/* 1级路由 */}
//       <Route path="/app" element={<App2 />}>
//         {/* 直接在上级路由的内部写下级路由 */}
//         <Route path="home" element={<Home />}></Route>
//         <Route path="list" element={<List />}></Route>
//         {/* 注意点：子路由如果前面要带 / 请把父级也补全 */}
//         <Route path="/app/about" element={<About />}></Route>
//       </Route>
//     </Routes>
//   </BrowserRouter>
// );

// import App3 from "../App3";

// 这个路由配置是配合 navigate进行跳转扔
// const router = (
//   <BrowserRouter>
//     <Routes>
//       {/* 1级路由 */}
//       <Route path="/app" element={<App3 />}>
//         {/* 直接在上级路由的内部写下级路由 */}
//         <Route path="home" element={<Home />}></Route>
//         <Route path="list" element={<List />}></Route>
//         {/* 注意点：子路由如果前面要带 / 请把父级也补全 */}
//         <Route path="/app/about" element={<About />}></Route>
//       </Route>
//     </Routes>
//   </BrowserRouter>
// );

// 配合路由传递参数的
import App4 from "../App4";
const router = (
  <BrowserRouter>
    <Routes>
      {/* 1级路由 */}
      <Route path="/" element={<App4 />}>
        {/* 直接在上级路由的内部写下级路由 */}
        <Route index element={<Home />}></Route>
        <Route path="home" element={<Home />}></Route>
        <Route path="list" element={<List />}></Route>
        {/* 注意点：子路由如果前面要带 / 请把父级也补全 */}
        <Route path="about/:id" element={<About />}></Route>
        <Route path="detail" element={<Detail />}></Route>
      </Route>
    </Routes>
  </BrowserRouter>
);

export default router;
